.app-courseDrill{
    background: #000;
    background-size: cover;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    video{
        width: 100%;
    }
    .action{
        position: absolute;
        display: flex;
        flex-direction: column;
        color: #fff;
        left: .3125rem;
        bottom: 2.9188rem;
        .act-top{
            font-size: 1.0625rem;
        }
        .act-bottom{
            font-size: .3125rem;
        }
    }
    .control{
        position: relative;
        height: 2.1406rem;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        position: absolute;
        width: 100%;
        align-items: center;
        bottom: 0;
        .iconfont{
            font-size: .625rem;
        }
        p{
            position: absolute;
            top: 1px;
            left: 0;
            height: 3.0016px;
            width: 30%;
            background-color: #ff6060;
        }
    }
    .mask{
        position: absolute;
        display: none;
        width: 100%;
        height: 100%;
        top: 0;
        background: rgba(2, 171, 250, 0.95);
        .mas-top{
            color: #fff;
            position: absolute;
            top: 1.0938rem;
            font-size: .3906rem;
            margin: 0 .7031rem;
        }
        .mas-center{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            height: 100px;
            display: flex;
            width: 100%;
            justify-content: space-around;
            &>div{
                width: 2.7188rem;
                height: 2.7188rem;
                border-radius: 50%;
                color: #fff;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                .iconfont{
                    font-size: .8938rem;
                }
                .text{
                    font-size: .35rem;
                }
            }
            .continuing{
                background-color: #79f0c2;
            }
            .finish{
                background-color: #ff6060;
            }
        }
        .mas-bottom{
            position: absolute;
            display: flex;
            overflow: hidden;
            top: 67%;
            width: 7.0313rem;
            border: .0156rem solid #fff;
            height: 1.9625rem;
            border-radius: .2344rem;
            left: 50%;
            transform: translateX(-50%);
            .mas-left{
                background: url(../imgs/part4.png) no-repeat;
                background-size: cover;
                width: 47%;
                height: 100%;
            }
            .mas-right{
                display: flex;
                flex-direction: column;
                flex: 1;
                justify-content: space-evenly;
                align-items: center;
                .mas-right-top{
                    font-size: .475rem;
                    color: #9dbde3;
                }
                .mas-right-bottom{
                    color: #fff;
                    font-size: .3656rem;
                }
            }
        }
    }
}